<template>
	<view class="Recharge_content">
		<view class="center_content">
			<view class="back key_back transcation">
				<image src="../../static/image/key_back.png" @tap="back"></image>
				<text>{{i18n.transaction}}</text>
				<!-- <text :style="i18n.transactionstyle">{{i18n.transaction}}</text> -->
			</view>
			<view class="box" v-if="dataList.length >0">
				
			
			  <mescroll-uni 
				ref="mescrollRef" 
				class="data_list" 
				@init="mescrollInit" 
				@down="downCallback" 
				@up="upCallback" 
				:down="downOption" 
				:fixed="false"
				:up="upOption" >
				<!-- 转出 -->
		<!-- 		<view  class="data_item out_item"
				v-if="dataList.length >0"
				v-for="(item,index) in dataList"
				:key="index"
				:class="[{'in_item':item.txto == account_info.accountName},{'publish_item':item.actiontype==772},{'tp':item.actiontype==774}]"
				@tap="transactionDetail(item.actionhash)"
				> -->
				<view  class="data_item "
				v-if="dataList.length >0"
				v-for="(item,index) in dataList"
				:key="index" 
				:class="{
					'publish_item':item.actiontype==772,
					'tp':item.actiontype==774,
					'in_item':item.txto == account_info.accountName&&item.actiontype!=774&&item.actiontype!=772,
					'out_item':item.txto != account_info.accountName&&item.actiontype!=774&&item.actiontype!=772}"
				@tap="transactionDetail(item.actionhash)"
				>
				<text class="data_type" v-if="item.actiontype==772">{{i18n.TransactionRecords}}</text>
				<text class="data_type" v-else-if="item.actiontype==774">{{i18n.mining_award}}</text>
				<text class="data_type" v-else>{{item.txto == account_info.accountName? i18n.zr:i18n.zc}}</text>
					<view class="item_box">
						<view class="left">
							<text  v-if="item.actiontype==772"> {{item.txto == account_info.accountName ? 'From：' + initAccountName(item.txfrom)  :'To：' + initAccountName(item.txto)}}</text>
									<text  v-else-if="item.actiontype==774"> {{item.txto != account_info.accountName ? 'From：' + initAccountName(item.txfrom)  :'To：' + initAccountName(item.txto)}}</text>
							<text v-else> {{item.txto == account_info.accountName ? 'From：' + initAccountName(item.txfrom)  :'To：' + initAccountName(item.txto)}}</text>
							<text class="status">{{i18n.state}}: {{item.actiondata.status == "1"? i18n.success : i18n.failed}}</text>
						</view>
						<view class="right">
							<view class="right_left">
								<text v-if="item.actiontype!=774">{{i18n.amount}}: {{item.actiondata.realvalue}} {{item.actiondata.symbol}}</text>
								<text v-else>{{i18n.amount}}: *** OEX</text>
								<text>{{i18n.time}}: {{getTime(item.transactiontime)}}</text>
							</view>
							<image src="../../static/image/right_icon.png"></image>
						</view>
					</view>
				</view>	
			</mescroll-uni>
			</view>
			<view v-show="isData" class="nodata">
				{{i18n.nodata}}...
			</view>
		</view>
	 </view> 
	
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {myMixins} from '../../common/mixins.js'
	export default {
		computed: {
			i18n() {
				return this.$t('user')
			}
		},
		mixins: [MescrollMixin,myMixins], // 使用mixin
		data() {
			return {
				accountName:"",
				pageIndex:1, //当前第几页
				pageSize:20, //页大小
				dataList: [],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false
				},
				isData:false
			}
		},
		onShow() {
			//this.accountName = uni.getStorageSync("accountName");
			//获取交易信息
			uni.showLoading()
			this.initData();
		},
		methods: {
			transactionDetail(actionhash){
				//#ifdef APP-PLUS
						plus.runtime.openURL('http://oexchain.com/#/Transaction?' + actionhash);
				//#endif
			},
			initAccountName(accountName){
				//
				let name = "";
				if(accountName.includes('.')){
					const prefix = accountName.split('.')[0];
					const suffix = accountName.split('.')[1];
					name =	prefix.substr(0, 3) + '**' + prefix.substring(14, 16) + '.' +	suffix.substr(0, 3) + '**' + suffix.substring(-1, -2)
					
				}else{
					name = accountName.substr(0, 3) + '**' + accountName.substring(-1, -2)
				}
				return name;
			},
			initData(){
				//初始化
				console.log("hahahh")
				const _this = this;
				this.requestList().then(res=>{
					//console.log(res)
					uni.hideLoading()
					if(res.list.length < 1){
						_this.isData = true;
						return;
					}
					this.pageIndex ++;
					_this.dataList = res.list;
					//console.log(res.list)
				}).catch(error =>{
					console.log(error)
				})
			},
			getTime(time){
				//转化时间戳
				time = Number(time.toString().substring(0,13))
				return this.$CommonJS.getTime(time,1)
			},
			back(){
				this.$CommonJS.navigateBack()
			},
	
			downCallback() {
				//下拉刷新的回调 
				this.pageIndex = 1;
				const _this = this;
				this.requestList().then(res=>{
					console.log(res)
					_this.pageIndex ++;
					_this.dataList = [];
					_this.dataList = res.list;
					_this.mescroll.endSuccess();
					uni.showToast({
						title:"已刷新",
					})
				}).catch(error =>{
					console.log(error)
					_this.mescroll.endErr();
				})
			},
			upCallback(page) {
				//上拉加载
				const _this = this;
				this.requestList().then(res=>{
					console.log(res)
					_this.mescroll.endBySize(res.list.length,res.total);
					if(res.list.length < 1){
						
						uni.showToast({
							title:"没有更多数据了",
							icon:"none"
						})
						return;
					}
					console.log(res)
					_this.pageIndex ++;
					res.list.map(item =>{
						_this.dataList.push(item);
					})
				}).catch(error =>{
					console.log(error)
					_this.mescroll.endErr();
				})
			},
			 requestList() {
				//请求封装
				const _this = this;
				console.log(JSON.stringify(_this.$API.appServeApi + _this.$API.gettransactionforme + '?i18n_language=' + uni.getStorageSync('system_info')))
				return new Promise((resolute, reject)=>{
					//延时一秒,模拟联网
					setTimeout(function() {
						try {
							var list = [];
							
							 uni.request({
									url:_this.$API.appServeApi + _this.$API.gettransactionforme + '?i18n_language=' + uni.getStorageSync('system_info'),
									data:{
										account:_this.account_info.accountName,
										pageIndex:_this.pageIndex,
										pageSize:_this.pageSize
									},
									success(res) {
										//console.log(res)
										
										if(res.data.code == 200 && res.data.data.list.length >0){
											res.data.data.list.map(item =>{
												item.actiondata = JSON.parse(item.actiondata)
											})
											list = res.data.data;
											resolute(list);
										}else{
											list = res.data.data;
											resolute(list);
										}
									},
									fail(error) {
										console.log(error)
									}
								})
						} catch (e) {
							reject(e);
						}
					}, 1000)
				})
			},
			
		}
		
	}
</script>

<style lang="stylus">
	@import "../../static/stylus/me/me.stylus"
		
	.box 
		width 100% 
		height 85%
	.nodata
		font-size 13px 
		color #FFFFFF
		height 85%
		display flex 
		flex-direction column
		justify-content center
		align-items center
		width 100%
		
</style>
